<template>
  <!-- 名片 -->
  <div class="lb-card-manage">
    <top-nav />
    <div class="page-main">
      <div class="page-search-form">
        <el-form
          @submit.native.prevent
          :inline="true"
          :model="searchForm"
          ref="searchForm"
        >
          <el-form-item label="类型" prop="type">
            <el-select v-model="searchForm.type" placeholder="请选择">
              <el-option label="全部" :value="0"></el-option>
              <el-option label="员工" :value="1"></el-option>
              <el-option label="用户" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="是否推荐"
            prop="is_default"
            v-if="searchForm.type === 1"
          >
            <el-select v-model="searchForm.is_default" placeholder="请选择">
              <el-option label="全部" :value="2"></el-option>
              <el-option label="推荐" :value="1"></el-option>
              <el-option label="非推荐" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名/昵称" prop="keyword">
            <el-input
              v-model="searchForm.keyword"
              placeholder="请输入姓名/昵称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <lb-button
              size="medium"
              type="primary"
              icon="el-icon-search"
              style="margin-right: 5px"
              @click="getTableDataList(1)"
              >{{ $t('action.search') }}</lb-button
            >
            <lb-button
              size="medium"
              icon="el-icon-refresh-left"
              style="margin-right: 5px"
              @click="resetForm('searchForm')"
              >{{ $t('action.reset') }}</lb-button
            >
          </el-form-item>
        </el-form>
      </div>
      <el-row class="page-top-operate">
        <lb-button
          size="mini"
          plain
          type="primary"
          icon="el-icon-download"
          :loading="downloadLoading"
          @click="showExportDialog = true"
          >{{ $t('action.exportStaffData') }}</lb-button
        >
      </el-row>

      <el-dialog
        title="导出员工数据"
        :visible.sync="showExportDialog"
        width="530px"
        center
      >
        <el-form
          @submit.native.prevent
          :model="exportForm"
          ref="exportForm"
          label-width="80px"
        >
          <el-form-item label="公司/部门" prop="company">
            <el-cascader
              v-model="exportForm.company"
              collapse-tags
              :options="base_company"
              @change="choiceAllCompanyItem"
              :props="{
                multiple: true,
                checkStrictly: true,
                label: 'name',
                value: 'id'
              }"
              clearable
            ></el-cascader>
            <lb-tool-tips
              >请选择公司/部门，不选择将默认为全部公司/部门</lb-tool-tips
            >
          </el-form-item>
          <el-form-item label="请选择" prop="range">
            <el-date-picker
              v-model="exportForm.range"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
            <lb-tool-tips
              >请选择时间段,如不选择日期默认导出截止今日的全部数据；如开始和结束日期设置为同一天，将导出截止到所选日期当日为止的数据，如开始和结束日期分别设置，将导出该时间段内的数据</lb-tool-tips
            >
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="hideExportDialog">{{
            $t('action.cancel')
          }}</el-button>
          <el-button type="primary" @click="toExportStaff">确认导出</el-button>
        </span>
      </el-dialog>

      <el-table
        v-loading="isLoading"
        :data="tableData"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        style="width: 100%"
      >
        <el-table-column prop="id" label="ID"> </el-table-column>
        <el-table-column prop="avatarUrl" label="头像">
          <template slot-scope="scope">
            <lb-image :src="scope.row.avatarUrl" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="nickName" label="昵称"> </el-table-column>
        <el-table-column prop="phone" label="手机号"> </el-table-column>

        <el-table-column prop="companyName" label="公司"> </el-table-column>
        <el-table-column prop="departmentName" label="部门"> </el-table-column>
        <el-table-column prop="job_name" label="职位"> </el-table-column>
        <el-table-column prop="address" width="100" label="用户类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.is_boss === 1" type="success">BOSS</el-tag>
            <el-tag v-else-if="scope.row.is_staff === 0" type="info"
              >用户</el-tag
            >
            <el-tag v-else>员工</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" :label="tips">
          <template slot-scope="scope">
            <el-switch
              v-if="scope.row.is_staff"
              v-model="scope.row.is_default"
              :active-value="1"
              :inactive-value="0"
              @change="settingDefaultCard(scope.row.is_default, scope.row.id)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column width="220px" label="操作">
          <template slot-scope="scope">
            <div class="table-operate">
              <lb-button
                size="mini"
                v-if="scope.row.is_staff === 1"
                plain
                type="primary"
                @click="
                  openDialog(scope.row.qr_path, scope.row.id, scope.$index)
                "
                >小程序码</lb-button
              >
              <lb-button
                size="mini"
                v-if="scope.row.is_staff === 1"
                plain
                type="danger"
                @click="
                  $router.push(`/businessCard/editCard?id=${scope.row.id}`)
                "
                >编辑{{ $t('menu.BusinessCard') }}</lb-button
              >

              <block v-if="routesItem.accountLevel === 1"></block>
              <block v-else>
                <lb-button
                  v-if="scope.row.is_staff === 1 && scope.row.is_boss !== 1"
                  size="mini"
                  plain
                  type="success"
                  @click="settingBoss(scope.row.id, 2)"
                  >设为BOSS</lb-button
                >
                <lb-button
                  v-if="scope.row.is_boss === 1"
                  size="mini"
                  plain
                  type="info"
                  @click="cancelBossAuth(scope.row.id)"
                  >取消BOSS</lb-button
                >
              </block>

              <lb-button
                v-if="scope.row.is_staff === 1"
                size="mini"
                plain
                type="warning"
                @click="delCard(scope.row.id)"
                >取消{{ $t('menu.BusinessCard') }}</lb-button
              >
              <lb-button
                v-if="scope.row.is_staff === 0 && scope.row.import !== 1"
                size="mini"
                plain
                type="warning"
                @click="getAllCompanys(scope.row.id)"
                >设为员工并创建{{ $t('menu.BusinessCard') }}</lb-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <lb-page
        :batch="false"
        :page="searchForm.page"
        :pageSize="searchForm.limit"
        :total="total"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      >
      </lb-page>
    </div>
    <el-dialog
      title="小程序码"
      :visible.sync="centerDialogVisible"
      width="600px"
      center
    >
      <div class="dialog-inner">
        <lb-image v-if="qrcode.path" :src="qrcode.path" />
        <span v-else>还没有生成小程序码</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="creatNewQrPath"
          >生成{{ $t('menu.BusinessCard') }}码</el-button
        >
        <el-button type="primary" @click="downloadImg(qrcode.path, '名片码')"
          >下载{{ $t('menu.BusinessCard') }}码</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="权限设置" :visible.sync="dialogAuth" width="800px" center>
      <div class="auth-inner">
        <div class="auth-inner-box" style="width: 70%">
          <el-input
            v-model="filterTree"
            placeholder="请输入公司部门"
          ></el-input>
          <div class="data-box">
            <vue-scroll :ops="ops">
              <el-checkbox
                v-if="!filterTree"
                :indeterminate="isIndeterminate"
                v-model="checkTreeAll"
                @change="handleCheckTreeAllChange"
                >全选</el-checkbox
              >
              <el-tree
                :data="authDataList"
                node-key="id"
                default-expand-all
                @node-click="handleClickTreeNode"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                ref="tree"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span>{{ data.name }}</span>
                  <i
                    style="color: #09f"
                    :class="data.selected ? 'el-icon-success' : ''"
                  ></i>
                </span>
              </el-tree>
            </vue-scroll>
          </div>
        </div>
        <div class="auth-inner-box">
          <p>已选择的：</p>
          <div class="data-box">
            <vue-scroll :ops="ops">
              <div class="department">
                <p
                  v-for="(item, index) in filterDeparmentData"
                  :key="index"
                  class="department-item"
                >
                  <span
                    ><i class="el-icon-s-cooperation"></i> {{ item.name }}</span
                  >
                  <i
                    class="el-icon-error"
                    @click="deletDepartment(authDataList, item.id)"
                  ></i>
                </p>
              </div>
            </vue-scroll>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAuth = false">取 消</el-button>
        <el-button type="primary" @click="settingBossAuth">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pubic from '@/utils/public'
import { mapState } from 'vuex'

export default {
  data () {
    return {
      // dialogTree
      uploadForm: {
        name: '视频',
        file: ''
      },
      tips: `设为推荐${this.$t('menu.BusinessCard')}`,
      base_company: [],
      companyResult: [],
      copyCompanyId: [],
      showExportDialog: false,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      },
      exportForm: {
        company: [],
        date_type: 0,
        range: '',
        time: ''
      },
      downloadLoading: false,
      checkTreeAll: false,
      isIndeterminate: false,
      filterTree: '',
      AuthTreeLength: 0,
      handleDeparmentData: [],
      filterDeparmentData: [],
      authDataList: [],
      ops: {
        vuescroll: {
          wheelScrollDuration: 600
        },
        scrollPanel: {
          initialScrollY: false,
          initialScrollX: false,
          scrollingX: false,
          scrollingY: true,
          speed: 2000,
          easing: 'easeInOutQuart',
          verticalNativeBarPos: 'right'
        },
        rail: {},
        bar: {
          showDelay: 500,
          onlyShowBarOnScroll: false,
          keepShow: false,
          background: '#c1c1c1',
          opacity: 0.5,
          hoverStyle: false,
          specifyBorderRadius: false,
          minSize: false,
          size: '6px',
          disable: false
        }
      },
      isLoading: false,
      centerDialogVisible: false,
      dialogAuth: false,
      checked: false,
      authData: [],
      checkedTreeKey: [],
      allTreeKeys: [],
      authId: '',
      treeDefaultProps: {
        children: 'children',
        label: 'name'
      },
      qrcode: {
        path: '',
        id: '',
        index: ''
      },
      navSwitch: -1,
      tableData: [],
      searchForm: {
        type: 0,
        keyword: '',
        is_default: 2,
        page: 1,
        limit: 10
      },
      total: 0,
      multipleSelection: []
    }
  },
  components: {
  },
  async activated () {
    await this.getBaseCompany()
    this.getTableDataList()
  },
  computed: {
    ...mapState({
      routesItem: state => state.routes
    })
  },
  methods: {
    resetForm (name) {
      this.$refs[name].resetFields()
      this.getTableDataList(1)
    },
    async getBaseCompany () {
      // 基本信息验证
      let { data: company } = await this.$api.getBaseCompany()
      this.handleCompanyOptions(company)
      this.base_company = company
    },
    handleCompanyOptions (data, arr = []) {
      for (let i = 0, len = data.length; i < len; i++) {
        let newArr = JSON.parse(JSON.stringify(arr))
        newArr.push(data[i].id)
        this.companyResult.push(JSON.parse(JSON.stringify(newArr)))
        if (data[i].children && data[i].children.length) {
          this.handleCompanyOptions(data[i].children, newArr)
        }
      }
    },
    /**
     * @method 全选公司
     */
    choiceAllCompanyItem (val) {
      let { companyResult } = this
      // true = 添加  false 取消、减少
      let rType = val.length > this.copyCompanyId.length
      let firstVal = val[0] && val[0][0]
      if (rType) {
        // 添加
        if (firstVal && val.length === companyResult.length) {
          // 其他都选完了，就只有全选没选了
          this.exportForm.company = [[0], ...val]
        } else if (firstVal === 0) {
          this.exportForm.company = [[0], ...companyResult]
        }
      } else {
        // 减少
        if (firstVal === 0) {
          // 第一个为0 只取消全选
          let copyArr = JSON.parse(JSON.stringify(val))
          copyArr.splice(0, 1)
          this.exportForm.company = copyArr
        } else if (val.length === companyResult.length) {
          // 清空
          this.exportForm.company = []
        } else {
          this.exportForm.company = val
        }
      }
      this.copyCompanyId = this.exportForm.company
    },
    /**
       * @method 导出
       */
    toExportStaff () {
      this.downloadLoading = true
      let searchForm = JSON.parse(JSON.stringify(this.exportForm))
      // console.log(searchForm)
      if (searchForm.company.length > 0 && searchForm.company[0][0] === 0) {
        searchForm.company.splice(0, 1)
      }
      if (searchForm.company.length > 0) {
        let resCompany = []
        searchForm.company.map(item => {
          resCompany.push(item.length === 1 ? item[0] : item[item.length - 1])
        })
        searchForm.company = resCompany
      }
      let url = pubic.getProCurrentHref()
      let keywords = url.indexOf('?') > 0 ? '' : '?'
      let flag = url.indexOf('?') > 0
      Object.getOwnPropertyNames(searchForm).forEach((keys, value) => {
        keywords += flag ? `&${keys}=${searchForm[keys]}` : `${keys}=${searchForm[keys]}`
        flag = true
      })
      let token = sessionStorage.getItem('minitk')
      let dwonlaodUrl = `${url}/card/admin/cardExcel${keywords}&token=${token}`
      // alert(dwonlaodUrl)
      window.location.href = dwonlaodUrl
      setTimeout(() => {
        this.downloadLoading = false
        // this.showExportDialog = false
      }, 5000)
    },
    hideExportDialog () {
      this.showExportDialog = false
      this.downloadLoading = false
      this.exportForm = {
        company: [],
        date_type: 0,
        range: '',
        time: ''
      }
    },
    /**
     * @method 获取类表数据
     */
    getTableDataList (flag) {
      this.isLoading = true
      if (flag === 1) this.searchForm.page = 1
      let { searchForm } = this
      if (searchForm.type !== 1) {
        searchForm.is_default = 2
      }
      this.$api.getBusinessCardAllList(searchForm).then(res => {
        this.isLoading = false
        if (res.code === 200) {
          this.tableData = res.data.data
          this.total = res.data.total
        }
      })
    },

    handleSizeChange (val) {
      this.searchForm.limit = val
      this.handleCurrentChange(1)
    },

    handleCurrentChange (val) {
      this.searchForm.page = val
      this.getTableDataList()
    },

    /**
     * @method 打开小程序码对话框
     */
    openDialog (path, id, index) {
      let time = +new Date()
      path = path ? `${path}?t=${time}` : ''
      this.qrcode = { path, id, index }
      this.centerDialogVisible = true
    },

    /**
     * @method 取消名片
     */
    delCard (id) {
      this.$confirm(this.$t('tips.confirmCancel'), this.$t('tips.reminder'), {
        confirmButtonText: this.$t('action.comfirm'),
        cancelButtonText: this.$t('action.cancel'),
        type: 'warning'
      }).then(() => {
        this.$api.cancelStaffCard({ staff_id: id, method: 1 }).then(res => {
          if (res.code === 200) {
            this.$message.success(this.$t('tips.successOper'))
            this.searchForm.page = this.searchForm.page < Math.ceil((this.total - 1) / this.searchForm.limit) ? this.searchForm.page : Math.ceil((this.total - 1) / this.searchForm.limit)
            this.getTableDataList()
          }
        })
      })
    },
    // 全选事件
    handleCheckTreeAllChange () {
      let { checkTreeAll } = this
      let handleData = this.changeAuthList(this.authDataList, checkTreeAll)
      this.authDataList = handleData
      this.handleCheckedACompanys(this.authDataList)
    },

    changeAuthList (data, flag) {
      for (let i = 0, len = data.length; i < len; i++) {
        data[i].selected = flag
        if (data[i].children && data[i].children.length) {
          this.changeAuthList(data[i].children, flag)
        }
      }
      return data
    },
    /**
     * @method 设置为BOSS
     */
    settingBoss (id, type) {
      this.$confirm(type === 2 ? '设置为BOSS？' : '设置为员工？', this.$t('tips.reminder'), {
        confirmButtonText: this.$t('action.comfirm'),
        cancelButtonText: this.$t('action.cancel'),
        type: 'warning'
      }).then(() => {
        this.$api.settingStaffCard({ staff_id: id, method: type }).then(res => {
          if (res.code === 200) {
            this.$message.success(this.$t('tips.successOper'))
            this.searchForm.page = this.searchForm.page < Math.ceil((this.total - 1) / this.searchForm.limit) ? this.searchForm.page : Math.ceil((this.total - 1) / this.searchForm.limit)
            this.getTableDataList()
          }
        })
      })
    },

    /**
     * @method 取消BOSS权限
     */
    cancelBossAuth (id) {
      this.$confirm('你确定要取消吗', this.$t('tips.reminder'), {
        confirmButtonText: this.$t('action.comfirm'),
        cancelButtonText: this.$t('action.cancel'),
        type: 'warning'
      }).then(() => {
        this.$api.cancelStaffCard({ staff_id: id, method: 2 }).then(res => {
          if (res.code === 200) {
            this.$message.success(this.$t('tips.successOper'))
            this.searchForm.page = this.searchForm.page < Math.ceil((this.total - 1) / this.searchForm.limit) ? this.searchForm.page : Math.ceil((this.total - 1) / this.searchForm.limit)
            this.getTableDataList()
          }
        })
      })
    },
    /**
     * @method 获取所有的公司部门
     */
    getAllCompanys (id) {
      this.authId = id
      this.$api.getBossAuthInfo({ staff_id: id }).then(res => {
        if (res.code === 200) {
          if (res.data.length) {
            this.authDataList = res.data
            this.handleCheckedACompanys()
            this.dialogAuth = true
          } else {
            this.$confirm('你确定要把此用户设为员工吗？', this.$t('tips.reminder'), {
              confirmButtonText: this.$t('action.comfirm'),
              cancelButtonText: this.$t('action.cancel'),
              type: 'warning'
            }).then(() => {
              this.$api.settingBossAuth({ staff_id: id }).then(res => {
                if (res.code === 200) {
                  this.$message.success(this.$t('tips.successOper'))
                  this.searchForm.page = this.searchForm.page < Math.ceil((this.total - 1) / this.searchForm.limit) ? this.searchForm.page : Math.ceil((this.total - 1) / this.searchForm.limit)
                  this.dialogAuth = false
                  this.getTableDataList()
                }
              })
            })
          }
        }
      })
    },
    /**
     * @method 删除已选择的部门
     */
    deletDepartment (data, id) {
      for (let i = 0, len = data.length; i < len; i++) {
        if (data[i].id === id) {
          data[i].selected = false
          data[i].disabled = true
          this.handleCheckedACompanys()
          return
        } else {
          if (data[i].children && data[i].children.length) {
            this.deletDepartment(data[i].children, id)
          }
        }
      }
    },
    handleCheckedACompanys () {
      let handleComapny = this.handleSeletedCompanyDepartment(JSON.parse(JSON.stringify(this.authDataList)))
      this.handleDeparmentData = handleComapny.selected
      let checkedCompanys = handleComapny.selected.filter(item => {
        return item.selected
      })
      this.checkTreeAll = checkedCompanys.length === handleComapny.len
      this.AuthTreeLength = handleComapny.len
      this.isIndeterminate = checkedCompanys.length > 0 && checkedCompanys.length < handleComapny.len
    },

    handleClickTreeNode (obj) {
      obj.selected = !obj.selected
      this.handleCheckedACompanys()
    },
    filterNode (value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    /**
     * @method 处理已选择的公司部门
     */
    handleSeletedCompanyDepartment (data, result = { selected: [], len: 0 }) {
      for (let i = 0, len = data.length; i < len; i++) {
        result.selected.push(data[i])
        result.len += 1
        if (data[i].children && data[i].children.length) {
          let dataChildren = data[i].children
          delete data[i].children
          this.handleSeletedCompanyDepartment(dataChildren, result)
        }
      }
      return result
    },
    /**
     * @method 按钮下拉选项点击事件
     */
    handleCommand (command) {
      if (command[0] === 1) { // 设置权限
        this.authId = command[1]
        this.getAllCompanys(command[1])
      } else if (command[0] === 2) { // 取消boss权限
        this.$confirm('你确定要取消吗', this.$t('tips.reminder'), {
          confirmButtonText: this.$t('action.comfirm'),
          cancelButtonText: this.$t('action.cancel'),
          type: 'warning'
        }).then(() => {
          this.$api.cancelStaffCard({ staff_id: command[1], method: 2 }).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('tips.successOper'))
              this.searchForm.page = this.searchForm.page < Math.ceil((this.total - 1) / this.searchForm.limit) ? this.searchForm.page : Math.ceil((this.total - 1) / this.searchForm.limit)
              this.getTableDataList()
            }
          })
        })
      }
    },

    /**
     * @method 处理选中的权限数据
     */
    handleTreeData (arr, flag = false) {
      let newArr = []
      for (let i = 0, len = arr.length; i < len; i++) {
        if (flag && arr[i].selected) {
          newArr.push(arr[i].id)
        }
        if (!flag) {
          newArr.push(arr[i].id)
        }
        if (arr[i].children) {
          newArr.push(...this.handleTreeData(arr[i].children, flag))
        }
      }
      return newArr
    },

    /**
     * @method 设置为默认名片
     */
    async settingDefaultCard (status, id) {
      let methodModel = status === 1 ? 'settingStaffCard' : 'cancelStaffCard'
      let { code } = await this.$api[methodModel]({ staff_id: id, method: 3 })
      if (code !== 200) {
        let data = JSON.parse(JSON.stringify(this.tableData))
        data.map((item, index) => {
          if (id === item.id) {
            item.is_default = status === 1 ? 0 : 1
          }
        })
        this.tableData = data
        return
      }
      this.$message.success(this.$t('tips.successOper'))
    },

    /**
     * @method 全选操作
     */
    choiceAll (val) {
      if (val) {
        let { allTreeKeys } = this
        this.$refs.tree.setCheckedKeys(allTreeKeys)
      } else {
        this.$refs.tree.setCheckedKeys([])
      }
    },

    /**
     * @method 设置boss权限
     */
    settingBossAuth () {
      let companyIds = this.filterDeparmentData.map(item => {
        return item.id
      })
      let { authId } = this
      this.$api.settingBossAuth({ staff_id: authId, company_ids: companyIds }).then(res => {
        if (res.code === 200) {
          this.$message.success(this.$t('tips.successOper'))
          this.searchForm.page = this.searchForm.page < Math.ceil((this.total - 1) / this.searchForm.limit) ? this.searchForm.page : Math.ceil((this.total - 1) / this.searchForm.limit)
          this.dialogAuth = false
          this.getTableDataList()
        }
      })
    },
    /**
     * @method 下载图片
     */
    downloadImg (imgsrc, name) {
      this.$api.handleImgSrc(imgsrc).then(res => {
        let image = new Image()
        // 解决跨域 Canvas 污染问题
        image.setAttribute('crossOrigin', 'anonymous')
        image.onload = function () {
          let canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height
          let context = canvas.getContext('2d')
          context.drawImage(image, 0, 0, image.width, image.height)
          let url = canvas.toDataURL() // 得到图片的base64编码数据

          let a = document.createElement('a') // 生成一个a元素
          let event = new MouseEvent('click') // 创建一个单击事件
          a.download = name || 'photo' // 设置图片名称
          a.href = url // 将生成的URL设置为a.href属性
          a.dispatchEvent(event) // 触发a的单击事件
        }
        image.src = res
      })
    },

    creatNewQrPath () {
      let { id } = this.qrcode
      this.$api.creatNewStaffQr({ staff_id: id }).then(res => {
        if (res.code === 200) {
          let { qrcode } = this
          this.qrcode.path = res.data.src
          this.tableData[qrcode.index].qr_path = res.data.src
        }
      })
    }
  },
  watch: {
    filterTree (val) {
      this.$refs.tree.filter(val)
    },
    handleDeparmentData (val) {
      this.filterDeparmentData = val.filter(item => {
        return item.selected
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page-top-operate {
  .el-select,
  .el-input {
    width: 200px;
  }
}
.el-cascader,
.el-date-picker,
.el-date-editor.el-input {
  width: 350px;
}
.lb-card-manage {
  width: 100%;
  // padding: 0 24px;
  .lb-form {
    margin: 32px 0;
    width: 100%;
    height: 104px;
    background: $bgThemeColor;
    display: flex;
    align-items: center;
    padding-left: 50px;
    .el-form-item {
      white-space: nowrap;
    }
  }
  .el-radio__input.is-disabled .el-radio__inner,
  .el-radio__input.is-disabled.is-checked .el-radio__inner {
    background-color: #eee;
    color: #999;
  }
  .el-table {
    img {
      width: 60px;
      height: 60px;
    }
  }
  .dialog-inner {
    width: 300px;
    margin: 0 auto;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      border-radius: 5px;
      overflow: hidden;
    }
    span {
      font-size: 20px;
      color: #9e9e9e;
    }
  }
  // .auth-inner{
  //   min-height: 300px;
  // }
  .auth-inner {
    display: flex;
    height: 400px;
    &-box {
      flex: 1;
      padding: 0 10px;
      // background: #f60;
      &:last-child {
        border-left: 1px solid #eee;
        > p {
          height: 40px;
          line-height: 40px;
          padding: 0 10px;
        }
        .data-box {
          padding: 0 20px;
          .department {
            // height: 300px;
            &-item {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0 20px;
              margin-bottom: 10px;
              span {
                i {
                  color: #09f;
                }
              }
              i {
                cursor: pointer;
                display: inline-block;
                width: 16px;
                height: 16px;
                border-radius: 2px;
                font-size: 14px;
                text-align: center;
                line-height: 16px;
                &:hover {
                  background: #dcdfe6;
                }
              }
            }
          }
        }
      }
      .data-box {
        margin-top: 20px;
        height: 340px;
      }
    }
  }
  .bot {
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    height: 40px;
    font-size: 14px;
    color: #101010;
    > div {
      display: flex;
      align-items: center;
      white-space: nowrap;
      > div {
        &:first-child {
          height: 40px;
          padding-right: 30px;
          margin-right: 30px;
          border-right: 1px solid #e8e8e8;
          line-height: 40px;
        }
        .el-button {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
